<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>

<body style="background-color: darkgray;">
    <p id="myId">WebView Content</p>
    <p id="demo"></p>

    <button type="button" onclick="callFlutterFunction()">Click Me!</button>
    <p></p>
    <button type="button" onclick="jsCallNative()">jsCallNative()</button>
    <p id="callbackId1"></p>
    <p id="callbackId2"></p>
    <p id="callbackId3"></p>

    <div>
        <input type="text" id="text" value="111">
    </div>

    <script>
        var count = 0;

        function callFlutterFunction() {
            // 调用Flutter中的函数
            flutterObj.postMessage('JS 调用了 Flutter');
        }

        function runJsOnly() {
            count--;
            logInfo("runJsOnly " + count);
        }

        function runJsWithResult() {
            count++;
            logInfo("runJsWithResult " + count);
            return "result from js " + count;
        }

        function runJsWithParam(param) {
            logInfo("runJsWithParam " + count);
            return "result from js, param=" + JSON.stringify(param)
        }

        // bridge.js 相关操作

        function logInfo(info) {
            logInfoById("demo", info)
        }

        function logInfoById(id, info) {
            console.log("jslog: " + info);
            document.getElementById(id).innerHTML = info;
        }

        function regester() {
            logInfo("regester");
            window.bridge.regester("userInfo", userInfoHandler);
        }

        function userInfoHandler(data) {
            logInfoById("callbackId2", "testUserInfoCallback");
            var params = { "res": "aaaaaa", "dt": data };
            window.bridge.call("testUserInfoCallback", params);
        }

        function callback(data) {
            logInfoById("callbackId1", "testCallback");
            var params = { "res": "aaaaaaa", "dt": data };
            window.bridge.call("testCallback", params);
        }

        function jsCallNative() {
            logInfo("jsCallNative");
            var param = { "res": "xxxxxx" };
            window.bridge.call("getToken", param, callback);
        }

        regester();
    </script>
    <script>
        window.onresize = function() {
            console.log('jslog: ', JSON.stringify({
                'width': window.innerWidth,
                'height': window.innerHeight
            }))
        }
    </script>
</body>

</html>